<template>
    <div class="container">
        <div class="login">
            <div :class="log ? 'center' : 'center2'">
                <div id="form">
                    <input type="text"  v-model="userName" name="usrname" id="usr" placeholder="账号">
                    <input type="password" v-model="password" name="password" id="pwd" placeholder="密码">
                    <input type="password" v-if="!log" v-model="repassword" name="password" id="pwd" placeholder="密码">
                    <br>
                    <input type="submit"  @click="tologin" :value="log?'登录':'注册'" id="submit">
                    <input type="submit" v-if="log" @click="adminLogin" value="管理员登陆" id="submit2">
                </div>
            </div>
            <div class="register">
                <a href="#" :class="log ? 'typeface' : 'type2'">{{ log ? '还没有账号？' : '已有账号' }}</a>
                <br>
                <a href="#" ref="a" :class="log ? 'reg' : 'reg2'">{{ log ? '注册' : '登陆' }}</a>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue'
import {useUserStore} from '../stores/counter'
import { adminLoginApi, loginApi ,reg} from '../api/user'
import { useRouter } from 'vue-router';

const router = useRouter()
const store = useUserStore()

const a = ref<HTMLElement>()

const userName=ref('')
const password = ref('')
const repassword =ref('')
const log = ref(true)



onMounted(() => {
    a.value?.addEventListener('click', () => {
        log.value = !log.value
    })
})


const adminLogin = () => {
    adminLoginApi({
        userName:userName.value,
        password:password.value
    }).then(res => {
        if(res.data.code == 200){
            ElMessage({
                message:res.data.msg,
                type:'success'
            })
            store.login(res.data.data)
            router.push("/admin/user")
        }else{
            ElMessage({
                message:res.data.msg,
                type:'error'
            })
        }
    })
}
const tologin = () => {
    console.log(log);
    
    if(log.value){
        loginApi({
        userName:userName.value,
        password:password.value
    }).then(res => {
        if(res.data.code == 200){
            ElMessage({
                message:res.data.msg,
                type:'success'
            })
            store.login(res.data.data)
            router.push("/")
        }else{
            ElMessage({
                message:res.data.msg,
                type:'error'
            })
        }
    })
    }else {
        if(password.value !== repassword.value) {
            ElMessage({
                message:'两次密码不一致',
                type:'error'
            })
            return
        }else {
            reg({
                userName:userName.value,
                password:password.value
            }).then(res => {
                if(res.data.code == 200){
                    router.push('/')
                store.login(res.data.data)
            
                }
               })
        }
    }

}

</script>

<style scoped >
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: brown;
}

@font-face {
    font-family: "ZKWenYi";
    src: url(../assets/ZhanKuWenYiTi-2.ttf);
}

.container {
    height: 100%;
    /* background-color: rgb(83, 86, 173); */
    background: url('/imgs/background.jpg') no-repeat;
       background-size:100% 100%;

}

.login {
    top: 210px;
    left: 430px;
    position: fixed;
    height: 350px;
    width: 700px;
    background-color: rgb(153, 158, 222);
}

.center {
    left: 480px;
    top: 170px;
    height: 420px;
    width: 300px;
    background-color: rgb(255, 255, 255);
    position: fixed;
}

.enter {
    text-align: center;
    position: absolute;
    top: 5px;
    left: 93px;
    color: rgb(179, 179, 179);
}

#form {
    position: absolute;
    top: 100px;
}

.register {
    position: absolute;
    top: 130px;
    right: 100px;

}

.typeface {
    font-size: 30px;
    color: aliceblue;
}

.reg {
    position: absolute;
    top: 65px;
    left: 40px;
    height: 50px;
    width: 100px;
    font-size: 24px;
    padding-left: 25px;
    padding-top: 5px;
    color: white;
    border: 2px solid;
    background-color: transparent;
}

.reg2 {
    position: absolute;
    top: 65px;
    left: -480px;
    height: 50px;
    width: 100px;
    font-size: 24px;
    padding-left: 25px;
    padding-top: 5px;
    color: white;
    border: 2px solid;
    background-color: transparent;
}

.type2 {
    position: absolute;
    left: -530px;
    font-size: 30px;
    color: aliceblue;
}

#submit {
    height: 50px;
    width: 120px;
    color: white;
    background-color: rgb(255, 115, 179);
    border: none;
    position: absolute;
    left: 15px;
    border: 4px solid;
    border-image: linear-gradient(pink, rgba(255, 255, 255, 0));
}

#submit2 {
    height: 50px;
    width: 120px;
    color: white;
    background-color: rgb(255, 115, 179);
    border: none;
    position: absolute;
    left: 150px;
    border: 4px solid;
    border-image: linear-gradient(pink, rgba(255, 255, 255, 0));
}

form {
    position: absolute;
    left: 18px;
}

#usr,
#pwd {
    height: 50px;
    width: 260px;
    padding-left: 10px;
    margin-left: 20px;
    margin-bottom: 20px;
    bottom: 1px solid #bbb;
}

#submit:hover {
    background-color: rgb(255, 157, 202);
}

.reg:hover {
    color: rgb(224, 226, 245);
}

.reg2:hover {
    color: rgb(224, 226, 245);
}

.center2 {
    position: absolute;
    right: 80px;
    top: -30px;
    height: 420px;
    width: 300px;
    background-color: r gb(255, 255, 255);
}</style>